<template>
	<view class="a">
		<!-- 发布人信息 -->
		<view class="create-by">
			<view class="user-info">
				<view class="user-avator">
					<image class="img" :src="userAvatar(carPoolDataDetail.avatar)"></image>
					<!-- <image class="img" :src="carPoolDataDetail.avatar.includes('http')?carPoolDataDetail.avatar:'http://localhost:8080'+carPoolDataDetail.avatar"></image> -->
				</view>
				<view class="recruit_contacts">
					<text>昵称：</text>
					<text>{{carPoolDataDetail.nickname}}</text>
				</view>
			</view>
			<view class="create-time"><text>{{carPoolDataDetail.createTime}}</text></view>
			<view style="border: 2rpx saddlebrown solid;"></view>
		</view>
		<!-- 主体信息 -->
		<view class="recruit-info">
			<view class="r-info">
				<text class="info-left">类型：</text>
				<text class="info-right" :style="{backgroundColor: carPoolDataDetail.carPoolType==1?'#ff5500':'#00aa00'}">{{changecarPoolType(carPoolDataDetail.carPoolType)}}</text>
				<u-line style="margin: 5rpx 0 10rpx 0"></u-line>
			</view>
			<view class="r-info">
				<text class="info-left">出发地：</text>
				<text>{{carPoolDataDetail.departureLocation}}</text>
				<u-line style="margin: 5rpx 0 10rpx 0"></u-line>
			</view>
			<view class="r-info">
				<text class="info-left">目的地：</text>
				<text>{{carPoolDataDetail.destination}}</text>
				<u-line style="margin: 5rpx 0 10rpx 0"></u-line>
			</view>	
			<view class="r-info">
				<text class="info-left">出发时间：</text>
				<text>{{setOutTime}}</text>
				<u-line style="margin: 5rpx 0 10rpx 0"></u-line>
			</view>	
			<view class="r-info">
				<text class="info-left">人数：</text>
				<text>{{carPoolDataDetail.setOutNum}}</text>
				<u-line style="margin: 5rpx 0 10rpx 0"></u-line>
			</view>	
			<view class="r-info">
				<text class="info-left">联系方式：</text>
				<text>{{carPoolDataDetail.phoneNum}}</text>
				<u-line style="margin: 5rpx 0 10rpx 0"></u-line>
			</view>	
			<view class="r-info">
				<text class="info-left">备注：</text>
				<text>{{carPoolDataDetail.remarks}}</text>
				<u-line style="margin: 5rpx 0 10rpx 0"></u-line>
			</view>	
		</view>
		<!-- 图片  已过期 -->
		<view class="expire-img" v-if="beOverdue">
			<image src="../../static/expired.png" mode="aspectFill"></image>
		</view>
		<!--   拨打电话 -->
		<view class="buttom" @click="call(carPoolDataDetail.phoneNum)">
			<view class="callPhone">
				<u-icon name="phone" size="24" color="#fff"></u-icon>
				<text>拨打电话</text>
			</view>
		</view>
	</view>
</template>

<script>
import {getCarPoolDetail} from '../../config/api.js'
import {mapGetters} from 'vuex'
	export default{
		data(){
			return {
				id:'',
				carPoolDataDetail:{},
				beOverdue:false,// 是否过期
				setOutTime:''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getCarPoolDetail()
		},
		computed:{
			...mapGetters(['getIsLogin','getBaseUrl'])
		},
		methods:{
			//时间格式
			timeFormat(time){
				var t = '';
				time = new Date(time).getTime();
				t = new Date(time).toISOString();
				t = t.substr(0,t.lastIndexOf('.'));
				t = t.replace('T',' ');
				return t;
			},
			// 请求数据
			getCarPoolDetail(){
				getCarPoolDetail({id:this.id}).then(res =>{
					this.carPoolDataDetail = res.data.data;
					this.setOutTime = this.timeFormat(this.carPoolDataDetail.setOutTime)
					this.checkDateTime(this.carPoolDataDetail.setOutTime);
				})
			},
			// 返回列表标签
			changecarPoolType(e){
				if(e==1){
					return '车找人'
				}
				if(e==0){
					return '人找车'
				}
			},
			// 用戶头像
			userAvatar(pic){
				if(pic !=null && pic != ''){
					return pic.includes('http')?pic:this.getBaseUrl+pic
				}else{
					return pic
				}
			},
			// 判断是否过期
			checkDateTime(time){
				// 出发时间 - 当前时间 >0 则没发车
				if(Date.parse(time) - new Date().getTime() > 0){
					this.beOverdue = false
				}else{
					this.beOverdue = true
				}
			},
			// 打电话
			call(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	} 
</script>

<style scoped lang="scss">
	.a{
		
		.create-by{
			margin: 18rpx;
			.user-info{
				display: flex;
				.user-avator{
					.img{
						height: 60rpx;
						width: 60rpx;
						border-radius: 50rpx;
						float: left;
					}
				}
				.recruit_contacts{
					margin-left: 10rpx;
				}
				
			}
			.create-time{
				margin-left: 60rpx;
			}
			.telephone{
				display: flex;
				margin-left: 80rpx;
				justify-content: center;
				right: 0;
				align-items: center;
			}
		}
		.recruit-info{
			margin: 18rpx;
			.r-info{
				
				.info-left{
					color: #1296db;
				}
				.info-right{
					color: #fff;
				}
				.u-line{
					margin-top: 10rpx;
				}
			}
			.line-1{
				display: flex;
				justify-content: center;
				margin-bottom: 20rpx;
			}
			.imge{
				image{
					margin: 5rpx auto;
				}
			}
		}
		.expire-img{
			image{
				display: block;			
				margin: 100rpx auto;
				width: 200rpx;
				height: 200rpx;	
				
			}

		}
		.buttom{
			position: fixed;   // 固定定位
			flex-wrap: wrap;  //让弹性盒元素在必要的时候拆行
			bottom: 0;
			text-align: center;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;	

			.callPhone{
				display: flex;
				justify-content: center;
				color: #fff;
				background-color: #1296db;
			}
		}
	}
</style>